<template>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container">
      <router-link class="navbar-brand clickable" :to="{ name: 'home' }">
        激情五子棋对战
      </router-link>
      <button
          class="navbar-toggler clickable"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarText"
          aria-controls="navbarText"
          aria-expanded="false"
          aria-label="Toggle navigation"
      >
        +
      </button>
      <div class="collapse navbar-collapse" id="navbarText">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <li class="nav-item">
            <router-link
                :class="
                route_name == 'pk_index' ? 'nav-link active clickable' : 'nav-link clickable'
              "
                :to="{ name: 'pk_index' }"
            >对战</router-link
            >
          </li>
          <li class="nav-item">
            <router-link
                :class="
                route_name == 'record_index' ? 'nav-link active clickable' : 'nav-link clickable'
              "
                :to="{ name: 'record_index' }"
            >对局列表</router-link
            >
          </li>
          <li class="nav-item">
            <router-link
                :class="
                route_name == 'ranklist_index' ? 'nav-link active clickable' : 'nav-link clickable'
              "
                :to="{ name: 'ranklist_index' }"
            >排行榜</router-link
            >
          </li>
          <li class="nav-item">
            <router-link
                :class="
                route_name == 'friendlist_index' ? 'nav-link active clickable' : 'nav-link clickable'
              "
                :to="{ name: 'friendlist_index' }"
            >好友列表</router-link
            >
          </li>
          <li class="nav-item">
            <router-link
                :class="
                route_name == 'add_friend' ? 'nav-link active clickable' : 'nav-link clickable'
              "
                :to="{ name: 'add_friend' }"
            >添加好友</router-link
            >
          </li>

        </ul>

        <ul class="navbar-nav" v-if="$store.state.user.is_login">

          <li class="nav-item dropdown">
            <a
                class="nav-link dropdown-toggle clickable"
                href="#"
                role="button"
                data-bs-toggle="dropdown"
                aria-expanded="false"
            >
              {{ $store.state.user.username }}
            </a>
            <ul class="dropdown-menu" style="margin: 0">
              <li>
                <router-link
                    :to="{ name: 'user_bot_index' }"
                    class="dropdown-item clickable"
                    href="#"
                >我的Bot（未实现）</router-link
                >
              </li>
              <li>
                <router-link
                    :to="{ name: 'profile' }"
                    class="dropdown-item clickable"
                    href="#"
                >个人中心</router-link
                >
              </li>
              <li>
                <a class="dropdown-item clickable" href="#" @click.prevent="logout">退出 action</a>
              </li>
            </ul>
          </li>

        </ul>
        <ul class="navbar-nav" v-else-if="$store.state.user.pulling_info">
          <li class="nav-item">
            <router-link
                :to="{ name: 'user_account_login' }"
                class="nav-link clickable"
                href="#"
                role="button"
            >
              登录
            </router-link>
          </li>
          <li class="nav-item">
            <router-link
                :to="{ name: 'user_account_register' }"
                class="nav-link clickable"
                href="#"
                role="button"
            >
              注册
            </router-link>
          </li>
        </ul>
        <span class="coin" v-if="$store.state.user.friendRequest.length === 0">
          <router-link
              :class="
                route_name == 'receive_friend' ? 'nav-link active clickable' : 'nav-link clickable'
              "
              :to="{ name: 'receive_friend' }"
          ><el-icon size="30" ><BellFilled /></el-icon></router-link
          >
        </span>
        <span class="coin" v-if="$store.state.user.friendRequest.length !== 0">
          <router-link
              :class="
                route_name == 'receive_friend' ? 'nav-link active clickable' : 'nav-link clickable'
              "
              :to="{ name: 'receive_friend' }"
          >
            <el-icon size="30" class="bell-icon">
              <BellFilled />
            </el-icon>
            <span class="notification-dot"></span>
          </router-link>
      </span>

      </div>
    </div>
  </nav>
</template>

<script>
import { useRoute } from "vue-router";
import { computed } from "@vue/reactivity";
import { useStore } from "vuex";
import {ElMessage} from "element-plus";
import router from "@/router";

export default {
  setup() {
    const store = useStore();
    const route = useRoute();
    let route_name = computed(() => route.name);

    const logout = () => {
      store.dispatch("logout");
      router.push("/user/account/login/");
    };

    store.dispatch("getFriendRequest", {
      success() {

      },
      error(resp) {
        ElMessage.error(resp);
      }
    })
    return {
      route_name,
      logout,
    };

  },
};
</script>

<style scoped>
.clickable:hover {
  cursor: pointer;
}

/*处理抖动的消息*/
.bell-icon {
  position: relative;
}

.notification-dot {
  position: absolute;
  /*top: 100px; !* 根据需要调整位置 *!*/
  /*right: 100px; !* 根据需要调整位置 *!*/
  width: 10px;
  height: 10px;
  background-color: red; /* 红点颜色 */
  border-radius: 50%; /* 圆形 */
}

@keyframes shake {
  0% { transform: translate(0); }
  25% { transform: translate(-2px, -2px); }
  50% { transform: translate(2px, -2px); }
  75% { transform: translate(-2px, 2px); }
  100% { transform: translate(0); }
}

.bell-icon:hover .notification-dot {
  animation: shake .5s infinite; /* 鼠标悬停时抖动 */
}

</style>
